<template>
  <div class="goods">
    <menu-wrapper :goods="goods" :currFoodIndex="currFoodIndex" @change="handleMenuIndex"></menu-wrapper>
    <foods-wrapper :goods="goods"
                   :currMenuIndex="currMenuIndex"
                   @change="handleFoodIndex"
                   @selected="handleSelectedFood"
                   ref="foodWrapper">
    </foods-wrapper>
    <shop-cart :deliveryPrice="seller.deliveryPrice" :minPrice="seller.minPrice" :selectFoods="selectFoods"></shop-cart>
    <food-detail :selectedFood="selectedFood" :foodDetailShow="foodDetailShow" ref="foodDetail"></food-detail>
  </div>
</template>

<script>
import axios from 'axios'
import MenuWrapper from './components/Menu'
import FoodsWrapper from './components/Foods'
import ShopCart from './../shoppingcart/ShopCart'
import FoodDetail from './../food/FoodDetail'
export default {
  name: 'Goods',
  components: {
    MenuWrapper,
    FoodsWrapper,
    ShopCart,
    FoodDetail
  },
  props: {
    seller: Object
  },
  data () {
    return {
      goods: [],
      currMenuIndex: 0,
      currFoodIndex: 0,
      selectedFood: {},
      foodDetailShow: false
    }
  },
  created () {
    axios.get('/api/goods').then(this.getInfo)
  },
  methods: {
    getInfo (res) {
      if (res.data) {
        this.goods = res.data.goods
        this.$nextTick(() => {
          this.$refs.foodWrapper.calculateHeight()
        })
      }
    },
    handleMenuIndex (index) {
      this.currMenuIndex = index
    },
    handleFoodIndex (index) {
      this.currFoodIndex = index
    },
    handleSelectedFood (food) {
      this.$refs.foodDetail.show()
      this.selectedFood = food
    }
  },
  computed: {
    selectFoods () {
      let selectFoods = []
      this.goods.forEach(function (good) {
        good.foods.forEach(function (food) {
          if (food.count) {
            selectFoods.push(food)
          }
        })
      })
      return selectFoods
    }
  }
}
</script>

<style lang="stylus" scoped>
  .goods
    display:flex
    position:absolute
    top:174px
    bottom:46px
    width:100%
    overflow:hidden
</style>
